<template>
	<div class="c-box u-page u-general-color">
		<div class="c-top c-name u-pl-20 u-pr-20">
			<div class="u-pt-10 job-name">{{job.jobName?job.jobName:''}}</div>
			<div class="c-price u-pt-10">
				{{job.salary?job.salary:''}}
			</div>
		</div>
			
		<div class="u-pl-20 u-pr-20 u-pt-10 c-content">
			<div class="u-flex u-pt-10">
				<div class="u-flex">
					<u-icon name="bag" color="#797979" size="17"></u-icon>
					<div class="u-pl-5">
						{{job.type}}·{{job.requirements}}
					</div>
				</div>
				<div class="u-flex u-pl-20">
					<u-icon name="account" color="#797979" size="17"></u-icon>
					<div class="u-pl-5">
						{{job.recruits}}人 {{job.degree}}
					</div>
				</div>
			</div>
			<div class="u-flex u-pt-10" @click="toCompanyDetails">
				<div>{{job.company}}</div>
			</div>
			<div class="u-pt-10 u-pb-10 u-cl-content c-content-date">
				更新于 {{job.updateTime}}
			</div>
		</div>
		<div class="c-bottom u-pl-20 u-pr-20 u-mt-10">
			<div class="u-border-bottom u-pt-15 u-pb-15 u-title">
				<p class="x-sidebar-left">职位详情</p>
			</div>
			<div class="u-pt-15">
				<div class="u-pb-5 u-flex" v-if="job.keyword && job.keyword.split(',').length>0">
                    <div class="u-pr-5" v-for="(titem, tindex) in job.keyword.split(',')" :key="tindex">
                        <u-tag
                            :text="titem"
                            type="info"
                            mode="dark"
                            size="mini"
                            bgColor="#f7f5f8"
                            borderColor="#f7f5f8"
                            color="#828282"
                        ></u-tag>
                    </div>
				</div>
				<rich-text :nodes="job.details" user-select="true"></rich-text>
			</div>
		</div>
		
		<div style="height: 140rpx;"></div>
			
		<div style="position: fixed;bottom: 0rpx;background-color: #fffbfe;width: 100%;z-index: 3;">
			<div class="u-pt-20 u-pb-40 u-flex" style="width: 90%;margin: 0 auto;height: 80px;">
				<button class="customStyle-btn" @click="CheckData">
					<u-icon name="kefu-ermai" color="#000000" size="25"></u-icon>
					<span class="customStyle-btn-span">客服</span>
				</button>
				<button class="customStyle-btn" @click="CheckData">
					<u-icon name="share-square" color="#000000" size="25"></u-icon>
					<span class="customStyle-btn-span">分享</span>
				</button>
				<div style="width: 100%;">
					<u-button type="error" :customStyle="customStyle" @click="CheckData">
						立即沟通
					</u-button>
				</div>
			</div>
		</div>
		<InvitationCode ref="invitationCodeRef" @childEvent="handleChildEvent" />
	</div>
</template>

<script>
import globalData from "@/globalData";

export default {
  data() {
    return {
	    content: '',
		showTips: false,
		OrUnid: '',
		job: {
			jobId: ''
		},
		SceneID: '',
		KF_show: false,
		customerServiceUrl: globalData.customerService,//客服微信二维码图片地址
		KF_content_top: '',
		KF_content_bottom: '',
		CodeUrl: '',
		customStyle: {
			backgroundColor: '#eb5468',
            borderColor: '#eb5468',
            color: '#ffffff'
		},
	}
  },
  
  mounted() {
	
  },
  
  onReady() {
  },
  
  onPullDownRefresh() {
    // 停止Loading
    uni.stopPullDownRefresh();
  },
  
  onReachBottom() {
  },

  onLoad(options) {
	//未登录跳转到登录页面
	if(this.isNotNull(options.jobId)){
		this.job.jobId = options.jobId
		this.getJobDetails()
	}else {
		this.showMSG('error', '出错啦！')
		setTimeout(() => {
			this.goBack()
		}, 2500)
	}
  },

  methods: {
	  
	  /**
	   * 获取岗位详情
	   */
	  async getJobDetails() {
	    let result = await this.$u.api.unifyMiniRestGet({
            params: {systemid: "meily"},
	  		url: "/job/get/"+this.job.jobId,
	  	});
	  	if(result.code == 200){
	  		this.job = result.data
	  	}
	  },

        /**
        * 判断用户是否已登录，如果登录则跳转到指定页面，否则弹出提示并跳转到登录页面
        */
        CheckData() {
            const userInfo = uni.getStorageSync('userInfo')
            if (!this.isNotNull(userInfo.userId)) {
                this.showMSG('none', '请先登录！')
                setTimeout(() => {
                    this.checkLogin()
                }, 1500)
            }else{
                //通过$refs获取子组件的引用，然后调用子组件的方法
                this.$refs.invitationCodeRef.isExistInvitationCode();
            }
        },

        /**
         * 验证完邀请码后回调方法
         */
        handleChildEvent() {
            let url = '/pages_tabbar_contact/index_contact/jobDetails?jobId=' + this.job.jobId
            this.toMiniProgram(url)
        },
	  
  }

};
</script>

<style scoped>
	.c-box{
		/* background-color: #f7f5f5; */
	}
	
	.c-top{
		display: flex;
		justify-content: space-between;
		/* background-color: #FFFFFF; */
	}
	
	.c-content{
		/* background-color: #FFFFFF; */
		color: #797979;
	}
	
	.c-bottom{
		/* background-color: #FFFFFF; */
	}
	
	.c-name{
		font-size: 38rpx;
		font-weight: 550;
	}
	
	
	/* 竖线 */
	.x-sidebar-left{
		text-indent: 20rpx;
		line-height: 30rpx;
		border-left: 7rpx solid #e55e97;
		width:150px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.c-price{
		color: #ea4d5e;
	}
	
	.c-content-date{
		font-size: 25rpx;
	}
	
	.job-name{
		  width: 400rpx;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  white-space: nowrap; 
	  }
	  
	.customStyle-btn {
		width: 50rpx;
		height: 80rpx;
		border: none !important;
		background-color: transparent;
		margin-left: 0;
		margin-right: 15rpx;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		padding-left: 0rpx !important;
		padding-right: 0rpx !important;
		padding-top: 6rpx !important;
	}
	
	.customStyle-btn::after {
		border: none;
	}
	
	.customStyle-btn-span {
		font-size: 20rpx;
		color: #000000;
		line-height: 45rpx;
	}
	
</style>
